import React, { FC, ReactElement, useState, useEffect } from 'react';
import style from './index.less';
import { Steps, message } from 'antd';
import BaseInfo from './BaseInfo/BaseInfo';
import ActivityInfo from './ActivityInfo/ActivityInfo';
import { saveDrafts, UpdateActivity, queryByUpdate } from '@/services';
import { history } from 'umi';
import { FirstForm, SecondForm } from '..';

const { Step } = Steps;
interface IProps {
  location: {
    query: any;
  };
}
const ActivityEstablish: FC<IProps> = (props): ReactElement => {
  const [baseData, setBaseData] = useState<FirstForm>(initBaseData); //基础数据  保存草稿请求所需
  const [activityData, setActivityData] =
    useState<SecondForm>(initActivityData); //活动数据
  const [stepState, setStepState] = useState(0);
  useEffect(() => {
    if (props.location.query.activityBasicId) {
      queryByUpdate({
        activityBasicId: props.location.query.activityBasicId,
      }).then((res) => {
        if (res.code === 200) {
          let getFirstData = JSON.parse(JSON.stringify(baseData));
          let getSecondData = JSON.parse(JSON.stringify(activityData));
          for (let key in getFirstData) {
            if (res.data[key]) {
              getFirstData[key] = res.data[key];
            }
          }
          getFirstData.startDate += ':01';
          getFirstData.endDate += ':01'; //请求的数据缺少了这个
          for (let key in getSecondData) {
            if (res.data[key]) {
              getSecondData[key] = res.data[key];
            }
          }
          getSecondData.activityVOS.forEach((item: any) => {
            item.startDate && (item.startDate += ':01');
            item.endDate && (item.endDate += ':01');
          });
          setBaseData(getFirstData);
          setActivityData(getSecondData);
        }
      });
    }
  }, []);
  const pageTurning = (formData: any, stepNum: number) => {
    console.log(formData, 1, stepNum);
    saveFormData(formData, stepNum === 0 ? 'second' : 'first');
    setStepState(stepNum);
  };
  const saveFormData = (formData: any, type: string) => {
    if (type === 'first') {
      setBaseData(formData);
    } else {
      setActivityData(formData);
    }
  };
  const releaseForm = (formData: any) => {
    let resultData = {
      ...baseData,
      ...formData,
    };
    if (props.location.query.activityBasicId) {
      resultData = {
        ...resultData,
        activityBasicId: props.location.query.activityBasicId,
      };
    }
    saveFormData(formData, 'second');
    UpdateActivity(resultData).then((res) => {
      if (res.code === 200) {
        message.success('保存成功！');
        history.push('/createActivity');
      } else {
        message.error(res.message);
      }
    });
  };
  const saveDraftsFirst = (formData: any, stepName: string) => {
    let draftsData = {};
    if (stepName === 'first') {
      draftsData = {
        ...formData,
        ...activityData,
      };
    } else {
      draftsData = {
        ...baseData,
        ...formData,
      };
    }
    if (props.location.query.activityBasicId) {
      draftsData = {
        ...draftsData,
        activityBasicId: props.location.query.activityBasicId,
      };
    }
    saveDrafts(draftsData).then((res) => {
      if (res.code === 200) {
        message.success('保存成功！');
        history.push('/createActivity');
      } else {
        message.error(res.message);
      }
    });
  };
  const { createActivityBox, detailCardBox } = style;
  const { titleSize, titleStep, marginTop20 } = initStyle;
  return (
    <div className={createActivityBox}>
      <div className={detailCardBox}>
        <div style={titleSize}>创建活动</div>
        <div style={{ ...titleStep, ...marginTop20 }}>
          <Steps progressDot current={stepState} size="small">
            <Step title="基本信息" />
            <Step title="活动信息" />
          </Steps>
        </div>
      </div>
      {!stepState ? (
        <BaseInfo
          goForNext={pageTurning}
          defaultFormData={baseData}
          saveDrafts={saveDraftsFirst}
        />
      ) : (
        <ActivityInfo
          goForPrev={pageTurning}
          releaseForm={releaseForm}
          defaultFormData={activityData}
          saveDrafts={saveDraftsFirst}
        />
      )}
      {/* <Row style={mt50}>
        <Button onClick={saveMust}>保存草稿</Button>
        <Button style={mr10}>预览</Button>
        <Button type="primary" style={mr10} onClick={goforNext}>
          下一步
        </Button>
      </Row> */}
    </div>
  );
};
export default ActivityEstablish;

const initStyle = {
  titleSize: {
    fontSize: '18px',
    fontWeight: '550',
  },
  titleStep: {
    width: '600px',
  },
  marginTop20: {
    marginTop: '20px',
  },
};
const initBaseData = {
  activityName: '',
  activitySite: '',
  activityOrganizers: '',
  activityContent: '',
  startDate: '',
  endDate: '',
  provinceCode: '',
  cityCode: '',
  pictureUrl: '',
  pictureKey: '',
  thumbnailPictureKey: '',
  thumbnailPictureUrl: '',
  scheduleVOS: [],
};
const initActivityData = {
  isSignUp: false,
  isVote: false,
  isRobTickets: false,
  isSignIn: false,
  isLuckyDraw: false,
  activityVOS: [],
};
